<template>
	<view class="min100 container" v-if="user_id">
		<view class="user_info flex flex-start ptb-30 plr-20 mt-10">
			<image :src="'http://im.ezongguan.com/static/photo/'+info.photo " mode=""></image>
			<view class="ml-20">{{info.username}}</view>
		</view>
		<view class="remarks ptb-30 plr-20 mt-20 flex1 " v-if="info.is_friend==0">
			<view class="">验证信息</view>
			<view class="ml-20">{{info.content}}{{content}}</view>
		</view>
		<view class="remarks ptb-30 plr-20 mt-20 flex" @click="show = true" v-if="info.is_friend==1">
			<view class="">备注名</view>
			<view class="flex1 flex-between">
				<view class="">{{name}}{{show_name}}</view>
				<u-icon class="ml-20" name="arrow-right"></u-icon>
			</view>
		</view>
		<u-popup v-model="show" mode="bottom" border-radius="14" height="330" :closeable="true">
			<view class="modify center">修改备注</view>
			<u-input v-model="value" :clearable="false" shape="square" placeholder="" :focus="true" />
			<u-button class="custom-style" type="primary" @click="submit">确定</u-button>
		</u-popup>
		<view class="mt-20" v-if="info.is_friend==1">
			<view class="flex remarks  ptb-30 plr-20">
				<view class="">
					消息免打扰
				</view>
				<u-switch size="40" @change="change" v-model="checkedone"></u-switch>
			</view>
			<view class="flex remarks ptb-30 plr-20">
				<view class="">
					置顶聊天
				</view>
				<u-switch size="40" v-model="checkedtwo"></u-switch>
			</view>
		</view>
		<!-- <view class="flex remarks mt-20 ptb-30 plr-20">
			<view class="">
				加入黑名单
			</view>
			<u-switch size="40" v-model="checkedone"></u-switch>
		</view> -->
		<view class="mt-20" v-if="info.is_friend==0">
			<view class="remarks ptb-30 plr-20 center" @click="agree" style="color: rgb(38,118,213);">同意</view>
			<view class="remarks ptb-30 plr-20 center" style="color: red;" @click="refuse">拒绝</view>
		</view>
		<view class="mt-20" v-if="info.is_friend==1">
			<view class="remarks ptb-30 plr-20 center" @click="sendmessage()">发送消息</view>
			<view class="remarks ptb-30 plr-20 center" @click="handledelete">删除好友</view>
		</view>
	</view>
	<view class="" v-else>
		<u-cell-group>
			<u-cell-item  title="群头像" value="">
				<image :src="'http://im.ezongguan.com/static/photo/'+info.group.is_photo" mode="widthFix" style="width: 80rpx;border-radius: 16rpx;"></image>
			</u-cell-item>
			<u-cell-item  title="群聊昵称" :value="info.group.name"></u-cell-item>
		</u-cell-group>
		<view class="mt-20">
			<view class="flex remarks  ptb-30 plr-20">
				<view class="">
					消息免打扰
				</view>
				<u-switch size="40" @change="change" v-model="checkedone"></u-switch>
			</view>
			<view class="flex remarks ptb-30 plr-20">
				<view class="">
					置顶聊天
				</view>
				<u-switch size="40" v-model="checkedtwo"></u-switch>
			</view>
		</view>
		<view class="memberBox">
			<view class="ptb-20 pl-20" style="background-color: rgb(240, 239, 244);">{{info.member.length}}个群成员</view>
			<view class="flex flex-start ptb-30 plr-20" @click="selectFriends(list_id)">
				<u-icon name="plus-circle" size="42"></u-icon>
				<view class="ml-20">邀请新成员</view>
			</view>
			<view class="member plr-40">
				<view class="memberBoxItem flex ptb-10" v-for="item in info.member">
					<view class="flex flex-start">
						<image :src="'http://im.ezongguan.com/static/photo/'+item.photo" mode="widthFix" style="width: 80rpx;"></image>
						<view class="">{{item.show_name}}</view>
					</view>
					<view class="online">
						<view class="flex" v-if="item.is_online==1">
							<image src="../../static/chip/qunzhu.png" mode="widthFix" style="width: 40rpx;"></image>
							<view class="ml-20">在线</view>
						</view>
						<view class="" v-else>离线</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				content:'',
				show_name: '',
				name: '',
				value: '', //备注
				show: false,
				info: '',
				checkedone: false,
				checkedtwo: false,
				user_id: '',
				list_id: '',
				isvalue: 0,
				info:''
			}
		},
		onShow() {
			this.getChatDetails()
		},
		onLoad(options) {
			// console.log(options)
			this.content=options.content
			this.show_name = options.show_name
			this.name = options.name
			this.user_id = options.user_id
			this.id = options.id
			this.list_id = options.list_id
			console.log(this.user_id);
			var params = {
				_token: uni.getStorageSync('im_token'),
				_agent_id: '1',
				user_id: this.user_id,
				in: 0,
			}
			uni.request({
				url: ` http://im.ezongguan.com/im/get/details`,
				method: 'POST',
				data: params,
				success: (res) => {
					console.log(res.data.data)
					this.info = res.data.data
				},
			})
		},
		methods: {
			// 获取群聊信息
			getChatDetails(){
				var params = {
					_token: uni.getStorageSync('im_token'),
					list_id: this.list_id,
					_agent_id: '1'
				}
				uni.request({
					url: `http://im.ezongguan.com/im/message/getChatDetails`,
					method: 'POST',
					data: params,
					success: (res) => {
						console.log(res.data.data)
						this.info=res.data.data
						console.log(this.info.group.is_photo)
						// uni.showToast({
						// 	title:'已添加无法拒绝',
						// 	icon:'none'
						// })
					},
				})
			},
			
			// 删除好友
			handledelete() {
				var params = {
					_token: uni.getStorageSync('im_token'),
					_agent_id: '1',
					user_id: this.user_id,
					in: 0,
				}
				uni.showModal({
					title: '提示',
					content: '是否删除',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							uni.request({
								url: ` http://im.ezongguan.com/im/remove/friend`,
								method: 'POST',
								data: params,
								success: (res) => {
									uni.showToast({
										title: '删除成功'
									})
									setTimeout((item) => {
										uni.switchTab({
											url: '/pages/chip/index'
										})
									}, 1000)
								},
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})

			},
			// 发送消息
			sendmessage() {
				console.log(this.user_id);
				uni.navigateTo({
					url: '/pages/chip/winmyCustomer?user_id=' + this.user_id
				})
			},
			change(status) {
				if (status == true) {
					this.isvalue = 0
					this.disturb()
				} else {
					this.isvalue = 1
					this.disturb()
				}
			},
			disturb() {
				var params = {
					_token: uni.getStorageSync('im_token'),
					value: this.isvalue,
					list_id: this.list_id,
					_agent_id: '1'
				}
				uni.request({
					url: `http://im.ezongguan.com/im/message/msgDisturb`,
					method: 'POST',
					data: params,
					success: (res) => {
						console.log(res.data)
					},
				})
			},
			// 邀请好友
			selectFriends(list_id){
				uni.navigateTo({
					url:'./selectFriends?list_id='+this.list_id
				})
			},
			// 拒绝
			refuse() {
				var params = {
					_token: uni.getStorageSync('im_token'),
					apply_id: this.id,
					_agent_id: '1'
				}
				uni.request({
					url: ` http://im.ezongguan.com/im/action/friendNixAction`,
					method: 'POST',
					data: params,
					success: (res) => {
						console.log(res.data)
						uni.showToast({
							title:'已添加无法拒绝',
							icon:'none'
						})
					},
				})
			},
			// 同意
			agree() {
				var params = {
					_token: uni.getStorageSync('im_token'),
					apply_id: this.id,
					_agent_id: '1'
				}
				uni.request({
					url: `http://im.ezongguan.com/im/action/friendAddAction`,
					method: 'POST',
					data: params,
					success: (res) => {
						console.log(res.data)
						uni.showToast({
							title:'已经是好友',
							icon:'none'
						})
					},
				})
			},
			submit() {
				var params = {
					_token: uni.getStorageSync('im_token'),
					content: this.value,
					user_id: this.user_id,
					_agent_id: '1'
				}
				uni.request({
					url: `http://im.ezongguan.com/im/friend/setRemarks`,
					method: 'POST',
					data: params,
					success: (res) => {
						console.log(res.data)
						this.show = false
						var params = {
							_token: uni.getStorageSync('im_token'),
							_agent_id: '1',
							user_id: this.user_id,
							in: 0,
						}
						uni.request({
							url: ` http://im.ezongguan.com/im/get/details`,
							method: 'POST',
							data: params,
							success: (res) => {
								console.log(res.data.data)
								this.info = res.data.data
								setTimeout((item) => {
									uni.switchTab({
										url: '/pages/chip/index'
									})
								}, 1000)
							},
						})
					},
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.custom-style {
		color: #fff !important;
	}
	::v-deep  .u-cell{
	}
	.memberBoxItem{
		border-top: 1rpx solid rgb(240, 239, 244);
		border-bottom: 1rpx solid rgb(240, 239, 244);;
	}
	::v-deep  .u-input__input {
		background-color: rgb(246, 246, 246);
		margin: 20rpx;
		padding: 0 20rpx;
	}

	.modify {
		height: 100rpx;
		line-height: 100rpx;
	}

	.container {
		background-color: #F5F5F5;

		.user_info {
			background-color: #fff;

			image {
				width: 100rpx;
				height: 100rpx;
			}
		}

		.remarks {
			background-color: #fff;
			border-bottom: 1rpx solid #F5F5F5;
		}
	}
</style>
